import {useGLTF} from '@react-three/drei'
import React,{useEffect,useRef,useState} from 'react'
import * as THREE from 'three'
const ModeLViewer: React.FC<{modelUrl:string}> = ({modelUrl}) => {
   //使用useRef创建modelRef，引用加载的3D模型(THREE.Group对象)
   const modelRef = useRef<THREE.Group>(null)
   //使用useState创建miner状态，管理动画混合器，允许同时播放多个动画
   const [mixer, setMixer] = useState<THREE.AnimationMixer | null>(null)
   //useGLTF加载并解析模型，返回模型的scene（模型的所有对象）和 animations（模型的所有动画）
   const {scene, animations} = useGLTF(modelUrl)
   //叫人物动
   useEffect(() => {
     //动画数组不为空并且模型引用存在，创建一个新的动画混合器
     if(animations.length > 0 && modelRef.current){
        const newMixer = new THREE.AnimationMixer(modelRef.current)
        //遍历动画数组，动画播放
        animations.forEach((clip)=>{
            newMixer.clipAction(clip).play()
        })
        //设置动画的混合器
        setMixer(newMixer)
     }
   }, [animations])
   useEffect(()=>{
    // 创建一个动画函数
          const animate = () => {
            //动画混合器存在，更新动画混合器
         if(mixer){
            mixer.update(0.01)
         }
         //下一个动画
         requestAnimationFrame(animate)
      }
      //调用动画函数
      animate()
   },[mixer])
   return (
      <primitive ref={modelRef} object={scene} scale={1.2} position={[0,-1,2]} />
   )
}

export default ModeLViewer